<template>
  <div class="datafilter">
    <!-- 默认样式 -->
    <div class="datafilter-model">
      <!-- 标题 -->
      <div class="datafilter-title">
        <div class="datafilter-title__name">分析数据集管理</div>
        <div class="datafilter-title__right">
          <div class="datafilter-title__temp" @click="changSortName">
            <div class="datafilter-title__temp-name">数据集名称</div>
            <img :src="desc === false && sortBy === 1 ? nameSort.img1 : nameSort.img2
            " class="specia-title__temp-cion" />
          </div>
          <div class="datafilter-title__temp" @click="changSortCreate">
            <div class="datafilter-title__temp-name">创建时间</div>
            <img :src="desc === false && sortBy === 2 ? dateSort.img1 : dateSort.img2
            " class="specia-title__temp-cion" />
          </div>
          <div class="datafilter-title__temp" @click="changSortUpdate">
            <div class="datafilter-title__temp-name">更新时间</div>
            <img :src="desc === false && sortBy === 3
            ? uploadSort.img1
            : uploadSort.img2
            " class="specia-title__temp-cion" />
          </div>
          <el-input class="datafilter-title__temp-ipt" suffix-icon="el-icon-search" v-model="name"
            placeholder="请输入分析数据集名称" @change="subjectdatasetListHanlde"></el-input>
        </div>
      </div>
      <div class="datafilter-content">
        <div class="datafilter-content-temp" v-for="item in fileDataList" :key="item.id" @click="showOtherHandle(item)">
          <div class="datafilter-content-add" v-if="item.title === 'init'" @click.stop="handAdd()"
            style="min-height: 180px">
            <img src="./assets/images/plus.png" height="48" alt="" />
            <div>创建分析数据集</div>
          </div>
          <div class="datafilter-content-item" v-else>
            <div class="datafilter-content-item-name">{{ item.name }}</div>
            <div class="datafilter-content-item-count">
              <!-- <div>节点数:{{ item.nodeNum }}</div> -->
              <div>共收录:{{ item.collectNum }}</div>
            </div>
            <div class="datafilter-content-item-content">
              {{ item.description || "---" }}
            </div>
            <div class="datafilter-content-item-date">
              <img src="./assets/images/date.png" alt="" />
              <div>
                {{ item.createTime }}
              </div>
            </div>
            <i class="fa-regular fa-pen-to-square analyzepage-icon-view" @click.stop="changeDataSetHandle(item)"></i>
            <!-- 删除标志 -->
            <i class="fa-regular fa-trash-can datafilter-icon" @click.stop="delDataSetHandle(item)"></i>
          </div>
        </div>
      </div>
    </div>



    <el-dialog title="创建分析数据集" width="429px" class="datafilter-dialog" :visible.sync="isdatafilter"
      :close-on-click-modal="false" :append-to-body="true" :show-close="false" @click.self="isSelect = false">
      <div class="datafilter-dialog__body">
        <el-row :gutter="20" type="flex" align="middle" class="mb-16">
          <el-col :span="6">数据集名称</el-col>
          <el-col :span="18"><el-input v-model="addname" placeholder="请输入数据集名称"
              class="form-control"></el-input></el-col>
        </el-row>

        <el-row :gutter="20" type="flex" align="middle" class="mb-16">
          <el-col :span="6">来源专题</el-col>
          <el-col :span="18"><el-select @change="changeSelection" v-model="subjectId" placeholder="请选择来源专题"
              class="form-control">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
              </el-option> </el-select></el-col>
        </el-row>

        <el-row :gutter="20" type="flex" align="top">
          <el-col :span="6">来源数据集<div style="font-size: 12px;">（可多选）</div></el-col>
          <el-col :span="18">
            <el-select v-model="subjectDatasetId" multiple filterable allow-create default-first-option
              placeholder="请选择来源数据集" class="full-width">
              <el-option v-for="item in small_data" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>

          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isdatafilter = false">取 消</el-button>
        <el-button type="primary" @click="handAddData">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 修改分析数据集弹窗 -->
    <el-dialog title="修改分析数据" width="429px" class="datafilter-dialog" :visible.sync="isdatachange" :show-close="false">
      <div class="datafilter-dialog__body">
        <el-row :gutter="20" type="flex" align="middle" class="mb-16">
          <el-col :span="6">数据集名称</el-col>
          <el-col :span="18"><el-input v-model="addname" placeholder="请输入数据集名称"
              class="form-control"></el-input></el-col>
        </el-row>
        <el-row :gutter="20" type="flex" align="middle" class="mb-16">
          <el-col :span="6">来源专题</el-col>
          <el-col :span="18">
            <el-select @change="changeSelection" v-model="subjectId" placeholder="请选择来源专题" class="form-control">
              <el-option v-for="item in options" :key="item.subjectId" :label="item.name" :value="item.id">
              </el-option> </el-select></el-col>
        </el-row>

        <el-row :gutter="20" type="flex" align="top">
          <el-col :span="6">来源数据集<div style="font-size: 12px;">（可多选）</div></el-col>
          <el-col :span="18">
            <el-select v-model="subjectDatasetId" multiple filterable placeholder="请选择来源数据集" class="full-width">
              <el-option v-for="item in small_data" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>

          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isdatachange = false">取 消</el-button>
        <el-button type="primary" @click="changeDataSetHanlde2">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 筛选数据 -->
  </div>
</template>

<script>
import {
  filterList,
  // filterlistVals,
  // filterPageList,
  // bindPatent,
} from "@/api/modules/filter";
import { MessageBox } from 'element-ui'
import {
  addanalysis,
  analysisList,
  delanalysis,
  editanalysis,
} from "@/api/modules/analysis";
import { subjectList } from "@/api/modules/subject";
import {
  subjectdatasetList,
  // adddatasetList,
  // removedatasetList,
  // editdatasetList,
} from "@/api/modules/subject_data";
import dateUtils from "../../utils/dateUtils.js";
export default {
  name: "DataFilter",
  data() {
    return {
      subjectDatasetId: [],//修改分析数据中的来源数据集
      dataList: [],
      nameSort: {
        sort: "des",
        img1: require("./assets/images/sort-a.png"),
        img2: require("./assets/images/sort-z.png"),
      },
      dateSort: {
        sort: "des",
        img1: require("./assets/images/sort1.png"),
        img2: require("./assets/images/sort2.png"),
      },
      uploadSort: {
        sort: "des",
        img1: require("./assets/images/sort1.png"),
        img2: require("./assets/images/sort2.png"),
      },
      fileDataList: [],
      isdatafilter: false,
      // isUpload: false,
      name: "",
      addname: "",
      addcontent: "",
      isSelect: false,
      isdatachange: false,
      code: "",
      filterList: [],
      desc: true,
      sortBy: "",
      analysisDatasetId: "",
      options: [],
      subjectId: "",
      // search_name: "",
      small_data: [],
      // select_name: [],
      sort: 1,
      isLoggedIn:false //登录状态
    };
  },



  mounted() {
    // // 检查本地存储中是否存在 TOKEN
    // if (localStorage.getItem('token')) {
    //   this.isLoggedIn = true
    // } else {
    //   this.isLoggedIn = false
    // }
    // 检查用户是否登录
    // 检查用户的登录状态
    // if (!this.isLoggedIn) { // 自定义的判断用户是否登录的函数，根据实际情况修改
    //       // 用户未登录，跳转到登录页面
    //       MessageBox.alert('您还未登录，请先登录', '提示', {
    //         confirmButtonText: '确定',
    //         callback: () => {
    //           localStorage.clear();
    //           sessionStorage.clear();
    //           // 跳转到登录页面
    //           this.$router.push('/login')
    //         }
    //       })
    //       return Promise.reject(new Error('未登录'))
    //     } else {
    //   // 用户已登录，执行您的组件初始化逻辑
    //   this.subjectdatasetListHanlde();
    // }

    this.subjectdatasetListHanlde();

  },
  methods: {

    returnhandle() {
      this.subjectdatasetListHanlde();
    },

    showOtherHandle(item) {
      this.$router.push({ name: 'sjsxDetail', params: { id: item.id } })
    },

    subjectdatasetListGo() {
      // 获取源数据集
      subjectdatasetList({
        subjectId: this.subjectId,
      }).then((res) => {
        if (res.code == 200) {
          this.small_data = res.rows;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    changeSelection() {
      this.subjectDatasetId = []; //选择来源专题，清空来源数据集
      this.subjectdatasetListGo();
    },
    subjectListHandle() {
      subjectList({}).then((res) => {
        if (res.code == 200) {
          this.options = res.rows;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },

    changSortName() {
      this.sortBy = 1;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.subjectdatasetListHanlde();
    },
    changSortCreate() {
      this.sortBy = 2;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.subjectdatasetListHanlde();
    },
    changSortUpdate() {
      this.sortBy = 3;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.subjectdatasetListHanlde();
    },



    // 点击出现修改分析数据集弹窗
    changeDataSetHandle(item) {
      this.subjectDatasetId = [];
      this.subjectListHandle(); //获取所有专题列表

      this.isdatachange = true; //显示修改分析数据集弹窗
      this.addname = item.name; //分析数据集名称
      this.subjectId = item.subjectId; //来源专题ID
      this.analysisDatasetId = item.id //获取分析数据集ID
      this.subjectdatasetListGo(); //获取来源数据集

      this.subjectDatasetId = item.subjectDatasetId.split(",");//使用逗号作为分隔符进行分割，并将分割结果存储在数组 subjectDatasetId 中。
    },
    // 修改分析数据集
    changeDataSetHanlde2() {
      if (!this.subjectId) {
        this.$message({
          message: "请选择专题",
          type: "error",
          showClose: true,
        });
        return;
      }
      if (this.subjectDatasetId.length == 0) {
        this.$message({
          message: "请选择来源数据集",
          type: "error",
          showClose: true,
        });
        return;
      }
      editanalysis({
        id: this.analysisDatasetId,
        name: this.addname,
        subjectDatasetId: String(this.subjectDatasetId),
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.isdatachange = false;
          this.subjectdatasetListHanlde();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },

    delDataSetHandle(item) {
      delanalysis(item.id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.subjectdatasetListHanlde();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    subjectdatasetListHanlde() {
      analysisList({
        name: this.name,
        desc: this.desc, //true倒序，false正序
        sortBy: this.sortBy,
      }).then((res) => {
        this.fileDataList = res.rows;
        this.fileDataList.push({
          title: "init",
        });
      });
    },
    getDate(item) {
      return dateUtils.dateToStr("yyyy-MM-DD HH:mm:ss", item);
    },
    handAdd() {
      this.subjectListHandle(); //获取所有专题列表
      this.isdatafilter = true;
      this.addname = "";
      this.addcontent = "";
      this.subjectDatasetId = [];
      // this.search_name = "";
      this.small_data = [];
      this.subjectId = "";
    },
    // 数据筛选修改布局
    handAddData() {
      if (!this.addname) {
        this.$message({
          message: "请输入专题名称",
          type: "error",
          showClose: true,
        });
        return;
      }

      if (!this.subjectId) {
        this.$message({
          message: "请选择专题",
          type: "error",
          showClose: true,
        });
        return;
      }
      if (this.subjectDatasetId.length == 0) {
        this.$message({
          message: "请选择来源数据集",
          type: "error",
          showClose: true,
        });
        return;
      }



      addanalysis({
        name: this.addname,
        // description: this.addcontent,
        subjectDatasetId: String(this.subjectDatasetId),
      }).then((res) => {
        if (res.code == 200) {
          this.$router.push({ name: 'sjsxDetail', params: { id: res.msg } })
          this.$message({
            message: "新增成功",
            type: "success",
            showClose: true,
          });

        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },


  },
};
</script>

<style lang="scss">
// 样式覆盖
.datafilter-dialog {
  .el-dialog__header {
    padding: 24px;
  }

  .el-dialog__body {
    padding: 0 24px;
  }

  .el-dialog__footer {
    padding: 24px;
  }

  .datafilter-dialog__body {
    .datafilter-dialog__body-temp {
      width: 100%;
      display: flex;
      align-items: center;
      // height: 46px;
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0 !important;
      }

      &>div {
        width: fit-content;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
        margin-right: 24px;
      }

      .datafilter-dialog__body-temp-ipt {
        flex: 1;
        height: 100%;
      }
    }

    .upload-demo {
      width: 100% !important;
      border-radius: 0 !important;

      .el-upload {
        width: 100% !important;
        margin-bottom: 24px;
      }

      .el-upload-dragger {
        width: 100% !important;
        border-radius: 0 !important;
      }

      .el-upload__text {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #313131;
        line-height: 24px;
        margin-bottom: 10px;
      }

      .upload-demo-upload {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 24px;
        cursor: pointer;
      }

      .upload-demo-img {
        width: 60px;
        height: 60px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 10px;
      }

      .el-upload-dragger {
        padding-top: 16px;
      }
    }
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.datafilter {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .datafilter-model {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 24px;
    box-sizing: border-box;
  }

  .datafilter-filter {
    width: 100%;
    height: 100%;
    display: flex;
    background: #fff !important;
  }

  .datafilter-title {
    height: 46px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .datafilter-title__name {
      font-size: 14px;

      font-weight: bold;
      color: #313131;
      line-height: 23px;
    }

    .datafilter-title__temp {
      display: flex;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #313131;
      line-height: 24px;
      margin-right: 24px;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;

      .datafilter-title__temp-name {
        margin-right: 4px;
        width: fit-content;
        height: 24px;
        white-space: nowrap;
      }

      .datafilter-title__temp-cion {
        width: 16px;
        height: 16px;
      }
    }

    .datafilter-title__right {
      display: flex;
      align-items: center;
      padding-right: 28px;
    }

    .datafilter-title__temp-ipt {
      width: 300px;
    }

    .datafilter-title__temp-btn {
      margin-left: 24px;
    }
  }

  .datafilter-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 24px;
    box-sizing: border-box;
    overflow-y: scroll;

    .datafilter-content-temp {
      width: calc(25% - 24px);
      margin-bottom: 24px;
      margin-right: 24px;
      // min-height: 200px;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;

      &:hover {
        box-shadow: 0px 8px 8px 0px rgba(76, 86, 187, 0.05);
      }
    }

    .datafilter-content-add {
      width: 100%;
      height: 100%;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #4c56bb;
      line-height: 20px;
    }

    .datafilter-content-item {
      padding: 24px;
      box-sizing: border-box;
      position: relative;
      // display: flex;

      // .analyzepage-icon-view {
      //   position: absolute;
      //   right: 50px;
      //   font-size: 24px;
      //   color: #000000;
      // }
      .analyzepage-icon-view {
        position: absolute;
        right: 56px;
        bottom: 18px;
        font-size: 18px;
        color: #000000;
        display: none;
      }

      .datafilter-icon {
        display: none;
        position: absolute;
        right: 24px;
        bottom: 18px;
        font-size: 18px;
      }

      &:hover {
        &>i {
          display: inline-block !important;
        }
      }

      .datafilter-content-item-name {
        // height: 15px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #4c56bb;
        line-height: 21px;
        width: auto;
        margin-bottom: 12px;
      }

      .datafilter-content-item-count {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }

      .datafilter-content-item-content {
        height: 60px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        width: 100%;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
      }

      .datafilter-content-item-date {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 14px;
        width: 100%;

        &>img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }

        &>i {
          display: none;
        }

        &:hover {
          &>i {
            display: inline-block !important;
          }
        }
      }

      .datafilter-content-item-line {
        width: 100%;
        height: 1px;
        background: #e7e7e7;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 14px;
      }

      .datafilter-content-item-btm {
        display: flex;

        .datafilter-content-item-btm-name {
          display: flex;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #313131;
          line-height: 20px;

          .datafilter-content-item-btm-num {
            font-size: 16px;
            font-family: DIN Alternate, DIN Alternate;
            font-weight: bold;
            color: #313131;
            line-height: 20px;
          }
        }

        .datafilter-content-item-btm-up {
          width: 90px;
          height: 24px;
          border-radius: 6px;
          display: flex;
          align-items: center;

          &>img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }

          background: #f2f5ff;
          cursor: pointer;
          font-size: 12px;
          font-family: PingFang SC,
          PingFang SC;
          font-weight: 400;
          color: #4c56bb;
          line-height: 20px;
          margin-left: 8px;
        }
      }
    }
  }





  .datafilter-filter-right-btm {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin-top: 24px;
  }
}

.form-control {
  width: 100%;
}

.date-item-title {
  font-size: 18px;
  font-weight: bold;
}

.specia-title__temp-cion {
  width: 16px;
  height: 16px;
}
</style>
